<template>
	<view>
		<view class="card">
			<u--form labelPosition="left" :model="form" :rules="rules" :errorType="errorType" ref="uForm"
				label-width="160rpx">
				<u-form-item label="订单平台" prop="oType" borderBottom ref="oType" @click="showGoodsType = true;">
					<u--input v-model="form.oType" disabled disabledColor="#ffffff" placeholder="请选择平台(美团/抖音/口碑)"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="团购券码" prop="lianxiAddress" borderBottom ref="lianxiAddress">
					<u--input v-model="form.lianxiAddress" placeholder="请输入团购券码" border="none"></u--input>
				</u-form-item>
				<u-form-item label="上门地址" prop="lianxiAddress" borderBottom ref="lianxiAddress">
					<u--input v-model="form.lianxiAddress" placeholder="请选择取衣地址" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系人" prop="lianxiName" borderBottom ref="lianxiName">
					<u--input v-model="form.lianxiName" placeholder="联系人" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系电话" prop="lianxiPhone" borderBottom ref="lianxiPhone">
					<u--input v-model="form.lianxiPhone" placeholder="联系电话" border="none"></u--input>
				</u-form-item>
				<u-form-item label="上门时间" prop="visitDay" borderBottom ref="item1">
					<u--input v-model="form.visitDay" placeholder="请选择预约时间" border="none"></u--input>
				</u-form-item>

				<u-form-item label="备注信息" prop="remark" ref="remark" labelPosition="top">

				</u-form-item>
				<u--textarea v-model="form.remark" placeholder="请输入洗护备注"
					style="background-color: rgba(0, 0, 0, 0);"></u--textarea>

			</u--form>
			<view class="u-m-t-20 u-m-l-80 u-m-r-80">
				<u-button type="primary" shape="circle" text="提 交 核 销" color="#FF5B00" @click="submit()"></u-button>
			</view>
			<view class="u-m-t-20 u-m-l-80 u-m-r-80">
				<u-button shape="circle" text="历史核销记录"></u-button>
			</view>
		</view>
		<view class="u-m-t-32">
			<view class="text">核销流程:</view>
			<view class="text">1.选择订单销售平台</view>
			<view class="text">2.截图保存平台团购二维码</view>
			<view class="text">3.上传核销码</view>
			<view class="text">温馨提示:</view>
			<view class="text">1.非套餐范围内的衣物，在入厂后，会有专属客服与您联系，补缴差价;</view>
			<view class="text">2.收衣时，将多个订单衣物一起交付即可:</view>
			<view class="text">3.建议您对衣物进行简易包装，包装物在入厂后将做废弃处理;如需使用纸箱包装，需额外加收纸箱包装费。</view>
		</view>

		
		<u-action-sheet :show="showGoodsType" :actions="typelist" title="请选择下单平台" @close="showGoodsType = false"
			@select="handleSelectClickType">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		addCompanyInfo,
		getDictList,
	} from "@/common/api/api.js"
	export default {
		data() {
			return {
				errorType: 'toast',
				showGoodsType: false,
				form: {
					oType: '',
					lianxiName: '',
					lianxiPhone: '',
					lianxiAddress: '',
					remark: "",
					visitDay: ''
				},
				typelist: [],
				rules: {
					'oType': {
						type: 'string',
						required: true,
						message: '选择销售平台',
						trigger: ['blur', 'change']
					},
					'lianxiAddress': {
						type: 'string',
						required: true,
						message: '请选择上门地址',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},onShow() {
			this.handleGetGoodTypelist();
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.handleAddCompanyInfo();
				})
			},
			// 提交信息
			handleAddCompanyInfo() {
				addCompanyInfo(this.form).then(res => {
					if (res.code == 200) {
						uni.$u.toast('提交成功，敬候佳音');
						this.form.companyName = '';
						this.form.lianxiUser = '';
						this.form.lianxiAddress = '';
						this.form.remark = '';
					}
				})
			},
			// 获取类型列表
			handleGetGoodTypelist() {
				getDictList({
					type: 'o2o_type'
				}).then(res => {
					this.typelist = res.data;
					this.typelist = this.typelist.map(item => {
						return {
							...item,
							name: item.deptName

						}

					})
				})
			},
			handleSelectClickType(item) {
				this.form.oType = item.name;
			},

		}
	}
</script>

<style lang="scss">
	.card {
		padding: 32rpx;
		background-color: #fff;
	}

	.label {
		height: 82rpx;
		font-size: 68rpx;
		font-family: Fontquan-XinYiGuanHeiTi-Regular, Fontquan-XinYiGuanHeiTi;
		color: #FFFFFF;
		line-height: 82rpx;
		letter-spacing: 3rpx;
		text-shadow: 4rpx 4rpx 8rpx rgba(32, 132, 113, 0.5);
	}

	.text {
		font-size: 24rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		line-height: 40rpx;
		color: #d00000;
	}
</style>